<template>
<div class="header"
     id="header"
     :style="bcgStyle">
  <flexbox class="row1"
           id="header-row1"
           align="center">
    <img :src="src">
    <h3>{{userName}}</h3>
  </flexbox>
  <flexbox class="row2"
           :gutter="0">
    <flexbox-item v-if="isshowtab('category')"
                  class="vux-1px-r categoryContent"
                  @click.native.stop="clickCategory">
      <flexbox align="center"
               justify="center"
               class="flex-item">
        <img :src="category">
        <span>分类</span>
        <img :src="guide">
      </flexbox>
      <div class="alertCategory"
           v-show="showCategory">
        <div class="shodomScreen"
             :style="shodomScreen"></div>
        <router-link tag="div"
                     @touchstart.native="changeImageImg('image', 'p')"
                     @touchend.native="changeImageImg('image', 'n')"
                     to="/category/image">
          <img :src="imageNormal">
          <span>图片</span>
        </router-link>
        <router-link tag="div"
                     @touchstart.native="changeDocumentImg('document', 'p')"
                     @touchend.native="changeDocumentImg('document', 'n')"
                     to="/category/document">
          <img :src="documentNormal">
          <span>文档</span>
        </router-link>
        <router-link tag="div"
                     @touchstart.native="changeVideoImg('video', 'p')"
                     @touchend.native="changeVideoImg('video', 'n')"
                     to="/category/video">
          <img :src="videoNormal">
          <span>视频</span>
        </router-link>
        <router-link tag="div"
                     @touchstart.native="changeAudioImg('audio', 'p')"
                     @touchend.native="changeAudioImg('audio', 'n')"
                     to="/category/audio">
          <img :src="audioNormal">
          <span>音乐</span>
        </router-link>
      </div>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('upload')"
                  class="vux-1px-r"
                  @click.native.stop="clickUpload">
      <flexbox align="center"
               justify="center"
               class="flex-item">
        <img :src="upload">
        <span>上传</span>
      </flexbox>
      <x-dialog v-model="showUploadModel">
        <div class="uploadModelDiv">
          <h3>选择上传文件类型</h3>
          <div>
            <div @touchstart="changeImageImg('image', 'p')"
                 @touchend="changeImageImg('image', 'n')">
              <img :src="imageNormal">
              <span>图片</span>
            </div>
            <div @touchstart="changeDocumentImg('document', 'p')"
                 @touchend="changeDocumentImg('document', 'n')">
              <img :src="documentNormal">
              <span>文档</span>
            </div>
            <div @touchstart="changeAudioImg('audio', 'p')"
                 @touchend="changeAudioImg('audio', 'n')">
              <img :src="audioNormal">
              <span>音乐</span>
            </div>
            <div @touchstart="changeVideoImg('video', 'p')"
                 @touchend="changeVideoImg('video', 'n')">
              <img :src="videoNormal">
              <span>视频</span>
            </div>
            <div @touchstart="changeAllImg('all', 'p')"
                 @touchend="changeAllImg('all', 'n')">
              <img :src="allNormal">
              <span>全部</span>
            </div>
            <div></div>
          </div>
        </div>
      </x-dialog>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('add')"
                  class="vux-1px-r">
      <flexbox align="center"
               justify="center"
               class="flex-item">
        <img :src="add">
        <span>添加</span>
      </flexbox>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('friends')"
                  class="vux-1px-r">
      <flexbox align="center"
               justify="center"
               class="flex-item">
        <img :src="friends">
        <span>我的好友</span>
      </flexbox>
    </flexbox-item>
    <flexbox-item v-if="isshowtab('transferlist')"
                  @click.native.stop="gotTtransfer">
      <flexbox align="center"
               justify="center"
               class="flex-item">
        <img :src="transferlist">
        <span>传输列表</span>
      </flexbox>
    </flexbox-item>
  </flexbox>
</div>

</template>

<script>
import { Flexbox, FlexboxItem, XDialog } from 'vux';
import src from '../assets/third_guide_head.png';
import category from '../assets/navigation_bar_category_icon.png';
import guide from '../assets/popup_menu_guide_white.png';
import upload from '../assets/navigation_bar_upload_icon.png';
import transferlist from '../assets/navigation_bar_transferlist_icon.png';
import add from '../assets/navigation_bar_add_icon.png';
import friends from '../assets/navigation_bar_friends_icon.png';

import { mapState, mapActions } from 'vuex';

import audioNormal from '../assets/netdisk_category_audio_normal.png';
import audioPressed from '../assets/netdisk_category_audio_pressed.png';
import documentNormal from '../assets/netdisk_category_document_normal.png';
import documentPressed from '../assets/netdisk_category_document_pressed.png';
import imageNormal from '../assets/netdisk_category_image_normal.png';
import imagePressed from '../assets/netdisk_category_image_pressed.png';
import videoNormal from '../assets/netdisk_category_video_normal.png';
import videoPressed from '../assets/netdisk_category_video_pressed.png';
import allNormal from '../assets/netdisk_upload_category_all_normal.png';
import allPressed from '../assets/netdisk_upload_category_all_pressed.png';

import bcg from '../assets/title_bar_with_avatar_bg.png';

export default {
  components: {
    Flexbox,
    FlexboxItem,
    XDialog
  },
  props: {
    src: {
      type: String,
      default: src
    },
    showbar: {
      type: Array,
      default: () => [
        'category',
        'upload',
        'transferlist'
      ]
    }
  },
  computed: mapState({
    userName: state => state.userName
  }),
  methods: {
    ...mapActions([
          'updateUser'
    ]),
    clickCategory() {
      var top = document.getElementById('header').offsetHeight
      this.shodomScreen = `top: -${top}px; height: calc(100% + ${top}px);`
      setTimeout(() => {
        this.showCategory = !this.showCategory
      }, 100)
    },
    clickUpload() {
      this.showUploadModel = !this.showUploadModel
    },
    isshowtab(kind) {
      return this.showbar.indexOf(kind) >= 0
    },
    changeImageImg(param, t) {
      if (t === 'n') {
        this[`${param}Normal`] = imageNormal
      } else {
        this[`${param}Normal`] = imagePressed
      }
    },
    changeDocumentImg(param, t) {
      if (t === 'n') {
        this[`${param}Normal`] = documentNormal
      } else {
        this[`${param}Normal`] = documentPressed
      }
    },
    changeVideoImg(param, t) {
      if (t === 'n') {
        this[`${param}Normal`] = videoNormal
      } else {
        this[`${param}Normal`] = videoPressed
      }
    },
    changeAudioImg(param, t) {
      if (t === 'n') {
        this[`${param}Normal`] = audioNormal
      } else {
        this[`${param}Normal`] = audioPressed
      }
    },
    changeAllImg(param, t) {
      if (t === 'n') {
        this[`${param}Normal`] = allNormal
      } else {
        this[`${param}Normal`] = allPressed
      }
    },
    gotTtransfer() {
      this.$router.push({ path: '/transfer' })
    }
  },
  data() {
    return {
      category,
      guide,
      upload,
      transferlist,
      add,
      friends,
      audioNormal,
      documentNormal,
      imageNormal,
      videoNormal,
      allNormal,
      showCategory: false,
      showUploadModel: false,
      bcgStyle: `background-image: url(${bcg});`,
      shodomScreen: ''
    }
  }
}

</script>

<style lang="less">
@import '~vux/src/styles/1px.less';
.header {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 500;
  .row1 {
    padding: 10px 15px;
    width: auto!important;
    img {
      width: 80px;
      margin-right: 10px;
    }
    h3 {
      letter-spacing: 3px;
    }
  }
  .row2 {
    background-color: #2486F5;
    .flex-item {
      height: 40px;
      img {
        height: 50%;
      }
      span {
        font-size: 13px;
        margin: 0 4px;
      }
    }
    .flex-item:active {
      background-color: rgba(64, 81, 181, 0.9);
    }
    .categoryContent {
      .alertCategory {
        .shodomScreen {
          position: fixed;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        width: 300%;
        background-color: #323B4C;
        position: absolute;
        display: flex;
        div:not(.shodomScreen) {
          z-index: 2;
          box-sizing: border-box;
          padding: 10px 15px;
          flex: 1;
          display: flex;
          flex-direction: column;
          img {
            margin: 0 auto;
            width: 80%;
          }
          span {
            margin-top: 5px;
            font-size: 13px;
            display: inline-block;
            text-align: center;
          }
        }
      }
    }
    .uploadModelDiv {
      padding: 20px 0;
      background-color: #383E4E;
      >div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        >div {
          flex: 0 0 33.33%;
          display: flex;
          flex-direction: column;
          padding-top: 20px;
          img {
            width: 80%;
            margin: 0 auto;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
</style>
